<template>
    <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path:'/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>
    <!-- 添加角色按钮区 -->
     <el-row>
        <el-col><el-button type="primary" plain @click="numType">添加分类</el-button></el-col>
     </el-row>
     <!-- 表格区 -->
     <tree-table :data="categList" :columns="columns" 
     :selection-type="false" index-text="#" 
     class="tree-table"
     :expand-type="false" show-index border>
     <!-- 是否有效 -->
     <template slot="isok" slot-scope="scope">
         <i class="el-icon-success" v-if="scope.row.cat_deleted===false" style="color:#00C78C;font-size:14px"></i>
         <i class="el-icon-error" v-else style="color:red;font-size:14px"></i>
     </template>
     <!-- 排序 -->
     <template slot="order" slot-scope="scope">
         <el-tag size="small" v-if="scope.row.cat_level===0">一级</el-tag>
         <el-tag type="success" size="small" v-else-if="scope.row.cat_level===1">二级</el-tag>
         <el-tag type="warning" size="small" v-else="scope.row.cat_level===2">三级</el-tag>
     </template>
     <!-- 操作 -->
     <template slot="opt" slot-scope="scope">
         <!-- 修改按钮 @click="showEdit(scope.row.id)"-->
           <el-button type="primary" icon="el-icon-edit" size="mini" style="width:50px;" @click="rolesdd(scope.row.id)"></el-button>
           <!-- 删除按钮 -->
           <el-button type="danger" icon="el-icon-delete" size="mini" style="width:50px;"></el-button>
     </template>
     </tree-table>
     <!-- 分页区域 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="querInfo.pagenum"
      :page-sizes="[5,10,15,20]" 
      :page-size="querInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
      <!--1.size-change监听pagsize改变的事件,(就是每页几条)  -->
      <!--2.current-change监听pagenum 页码值的变化,(就是前往第几页)  -->
      <!--3.current-page当前渲染的页码值  -->
      <!--4.page-sizes 每页几条 -->
      <!--5.layout 当前页面有哪些部分组成 -->
      <!--6.total总数据条数 -->
    </el-pagination>
    </el-card>
    <!-- 添加分类弹框~~~~~~~~~~~~~~~~~~~~~ -->
    <el-dialog
     title="添加分类"
     :visible.sync="dialogVisibleType"
     width="50%"
     @close="addCateDilogeClosed">
     <!-- 内容部分 -->
    <el-form :model="typeFrom" :rules="rulesType" ref="typeFromRef" label-width="100px">
        <el-form-item label="分类名称：" prop="cat_name">
          <el-input v-model="typeFrom.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类：">
          <el-cascader
             v-model="selectionw"
             :options="parentCateList"
              expand-trigger="hover"
             :props="cascaderProps"
             @change="handleChangeo"
             change-on-select
              clearable >
             <!-- options用来指定数据源 -->
             <!-- proops用来指定配置对象 -->
         </el-cascader>
        </el-form-item>
    </el-form>
     <span slot="footer" class="dialog-footer">
       <el-button @click="dialogVisibleType = false">取 消</el-button>
       <el-button type="primary" @click="addCate">确 定</el-button>
     </span>
    </el-dialog>
    <!-- 编辑============================ -->
    <el-dialog
    title="修改角色"
    :visible.sync="rolesDialogVisible"
    width="50%"
   >
   <!-- 内容部分 -->
   <el-form :model="ruleFormCotent" :rules="rulesType" ref="typeFromRef" label-width="100px">
   <el-form-item label="修改角色" prop="cat_name">
    <el-input v-model="ruleFormCotent.cat_name"></el-input>
   </el-form-item>
   </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="rolesDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="rolesDialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

    </div>
</template>
<script>
export default {
    data(){
        return{
            // 查询条件
            querInfo:{
                type:3,
                pagenum:1,
                pagesize:5            
                },
            //商品分类的数据列表
            categList:[],
            //总数据条数
            total:0,
            // 控制添加分类弹窗显示隐藏
            dialogVisibleType:false,
           //为table指定列
            columns:[
                {
                  label:'分类名称',
                  prop:'cat_name'
                },
                {
                  label:'是否有效',
                  //表示将当前定义为模板列
                  type:'template',
                  //表示当前这一列使用模板名称
                  template:'isok'
                },
                {
                  label:'排序',
                  //表示将当前定义为模板列
                  type:'template',
                  //表示当前这一列使用模板名称
                  template:'order'
                },
                 {
                  label:'操作',
                  //表示将当前定义为模板列
                  type:'template',
                  //表示当前这一列使用模板名称
                  template:'opt'
                }
            ],
            // 添加角色表单
            typeFrom:{
                // 分类名称
                cat_name:'',
                // 分类父 ID不能为空，如果要添加1级分类，则父分类Id应该设置为 
                cat_pid:0,
                // 分类层级，不能为空，`0`表示一级分类；`1`表示二级分类；`2`表示三级分类
                cat_level:0
            },
            // 验证规则
            rulesType:{
                cat_name: [
             { required: true, message: '请输入分类名称', trigger: 'blur' },
             { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
             ],
            },
            // 父级分类的列表
          parentCateList:[],
            //指定级联器选择器的配置对象
          cascaderProps:{
              //对应的值
              value:'cat_id',
              //显示的标题
              label:'cat_name',
              //子父级嵌套de属性
              children:'children'
            },
          //选中的父级分类id数组
          selectionw:[],
          //控制编辑弹框的显示隐藏
          rolesDialogVisible:false,
          //编辑弹框数据对象
          ruleFormCotent:{
            // //   分类名称
            //   cat_name:'',
            //   cat_id:0,
          },
        
    }},
    created(){
        this.getcategList();
    },
    methods:{
        // 获取商品分类数据
       async getcategList(){
           console.log(this.querInfo,"aaaaaaaaaaaaaaa");
            const {data:res}=await this.$http.get('categories',{ 
                params:this.querInfo 
            })
            if(res.meta.status!==200){
                return this.$message.error("获取商品列表失败！");
            }
            // console.log(res.data,"~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~``");
            // 把数据列表赋值给categList
            this.categList=res.data.result;
            //给总数据条数
            this.total=res.data.total;
            
        },
        // 监听pagsize改变的事件
        handleSizeChange(newSize){
            this.querInfo.pagesize=newSize;
            this.getcategList();
        },
        //监听pagenum 页码值的变化、
        handleCurrentChange(newPage){
            this.querInfo.pagenum=newPage;
            this.getcategList();
        },
        // 监听添加角色按钮
        numType(){
            //先获取父级分类的列表
            this.getParentCateList();
            // 再展示对话框
            this.dialogVisibleType=true;
        },
        //获取父级分类的列表
        async getParentCateList(){
            const {data:res} = await this.$http.get('categories',{
                params:{type:2}
            })
            if(res.meta.status !==200){
                return this.$message.error("获取父级分类数据失败！")
            }
                this.parentCateList = res.data;
        },
        //选择项发生变化触发这个函数++++++++++++NO++=+++++++++
        handleChangeo(){
            console.log(this.selectionw,"=====================111===============")
            //如果select数组中的length大于0.证明选中的父级分类
            //反之，就说明没有选中任何父级分类
            if(this.selectionw.length>0){
                //父级分类
                this.typeFrom.cat_pid=this.selectionw[this.selectionw.length-1]
                //当前分类等级的赋值
                this.typeFrom.cat_level=this.selectionw.length
                return
            }else{
                 //父级分类
                this.typeFrom.cat_pid=0
                //当前分类等级的赋值
                this.typeFrom.cat_level=0
            }
        },
        //点击按钮。添加新的分类
        addCate(){

            this.$refs.typeFromRef.validate(async valid=>{
            if(!valid) return
            // 可以发起接口请求
            const {data:res}= await this.$http.post("categories",this.typeFrom);
             if(res.meta.status!==201){
             this.$message.error('添加分类失败！!')
             }else{
                  this.$message.success('添加分类成功!')
                  //添加成功后需重新刷新列表，再次调用接口
                   this.getcategList();
                    //添加成功后隐藏对话框
                  this.dialogVisibleType=false;
                }
        })
        },
        //监听对话框的关闭事件，重置表单数据
        addCateDilogeClosed(){
            this.$refs.typeFromRef.resetFields();
            this.selectionw=[];
            this.typeFrom.cat_pid=0;
            this.typeFrom.cat_level=0;
        },
        // 监听编辑弹框事件
        async rolesdd(id){
           const{data:res}=await this.$http.get("categories/"+id);
           if(res.meta.status!==200){
                return this.$message.error("查询用户失败!")
           }
                this.ruleFormCotent=res.data;//不太理解
                this.rolesDialogVisible=true;
        }
    }
}
</script>

<style lang="less" scoped>
.tree-table{
    margin-top: 15px;
}
.el-cascader{
    width: 100%;
}
</style>


